<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
  <title>可售房源 - 活力长者社区</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
  <style>
    .house-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 30px;
    }

    .house-header {
      margin-bottom: 30px;
    }

    .house-card {
      background-color: white;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.05);
      overflow: hidden;
      margin-bottom: 25px;
      transition: transform 0.3s, box-shadow 0.3s;
      height: 100%;
    }

    .house-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

    .house-img {
      height: 200px;
      background-color: #e9f5eb;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #28a745;
      font-size: 3rem;
    }

    .house-body {
      padding: 20px;
    }

    .house-title {
      font-size: 1.2rem;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .house-location {
      color: #6c757d;
      margin-bottom: 15px;
      font-size: 0.9rem;
    }

    .house-details {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
    }

    .house-detail {
      text-align: center;
    }

    .detail-value {
      font-weight: 600;
      font-size: 1.1rem;
    }

    .detail-label {
      color: #6c757d;
      font-size: 0.9rem;
    }

    .house-price {
      font-size: 1.3rem;
      font-weight: 700;
      color: #28a745;
      margin-bottom: 15px;
      text-align: center;
    }

    .btn-buy {
      background-color: #28a745;
      color: white;
      width: 100%;
      padding: 10px;
      border-radius: 5px;
    }

    .btn-buy:hover {
      background-color: #218838;
      color: white;
    }

    .btn-disabled {
      background-color: #6c757d;
      color: white;
      width: 100%;
      padding: 10px;
      border-radius: 5px;
      cursor: not-allowed;
    }

    .filter-bar {
      background-color: white;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.05);
      padding: 20px;
      margin-bottom: 25px;
      position: relative; /* 新增：确保z-index生效 */
      z-index: 10; /* 新增：高于其他元素，避免被覆盖 */
    }

    .filter-title {
      font-weight: 600;
      margin-bottom: 15px;
    }
  </style>
</head>
<body>
<c:import url="header.jsp" />

<div class="house-container">
  <div class="house-header">
    <h2>可售房源</h2>
    <p class="text-muted">浏览并选择您心仪的康养房产</p>
  </div>

  <c:if test="${not empty error}">
    <div class="alert alert-danger">${error}</div>
  </c:if>

  <div class="filter-bar">
    <div class="row">
      <div class="col-md-3">
        <div class="mb-3">
          <label class="form-label filter-title">价格范围</label>
          <select id="priceRange" class="form-select">
            <option value="">不限</option>
            <option value="1">100万以下</option>
            <option value="2">100-200万</option>
            <option value="3">200-300万</option>
            <option value="4">300万以上</option>
          </select>
        </div>
      </div>
      <div class="col-md-3">
        <div class="mb-3">
          <label class="form-label filter-title">面积范围</label>
          <select id="areaRange" class="form-select">
            <option value="">不限</option>
            <option value="1">60㎡以下</option>
            <option value="2">60-90㎡</option>
            <option value="3">90-120㎡</option>
            <option value="4">120㎡以上</option>
          </select>
        </div>
      </div>
      <div class="col-md-3">
        <div class="mb-3">
          <label class="form-label filter-title">楼盘位置</label>
          <select id="location" class="form-select">
            <option value="">不限</option>
            <option value="阳光花园">阳光花园</option>
            <option value="康养新区">康养新区</option>
            <option value="魔仙堡">魔仙堡</option>
          </select>
        </div>
      </div>
      <div class="col-md-3">
        <div class="mb-3">
          <button class="btn btn-primary w-100 mt-4" onclick="filterHouses()">筛选</button> <!-- 添加mt-4调整顶部间距 -->
        </div>
      </div>
    </div>
  </div>

  <c:if test="${hasPurchased}">
    <div class="alert alert-info">
      <i class="bi bi-info-circle"></i> 您已购买一套房产，根据限购规则无法再次购买。
    </div>
  </c:if>

  <div class="row">
    <c:forEach items="${houses}" var="house">
      <div class="col-md-4">
        <div class="house-card">
          <div class="house-img">
            <c:choose>
              <c:when test="${not empty house.houseImage}">
                <img src="${pageContext.request.contextPath}/down?filename=${house.houseImage}" alt="${house.houseName}照片" class="img-fluid h-100 w-100 object-cover">
              </c:when>
              <c:otherwise>
                <i class="bi bi-house"></i>
              </c:otherwise>
            </c:choose>
          </div>
          <div class="house-body">
            <h3 class="house-title">${house.houseName}</h3>
            <div class="house-location">
                ${house.buildingNumber}栋${house.unitNumber}单元${house.roomNumber}
            </div>
            <div class="house-details">
              <div class="house-detail">
                <div class="detail-value">${house.area}</div>
                <div class="detail-label">面积(㎡)</div>
              </div>
              <div class="house-detail">
                <div class="detail-value">${house.status == 0 ? '可售' : '已售'}</div>
                <div class="detail-label">状态</div>
              </div>
            </div>
            <div class="house-price">
              <fmt:formatNumber value="${house.price}" type="currency" currencySymbol="¥"/>
            </div>
            <c:choose>
              <c:when test="${house.status == 0 && !hasPurchased}">
                <form action="PurchaseHouseServlet" method="post">
                  <input type="hidden" name="houseId" value="${house.houseId}">
                  <!-- 可点击状态 -->
                  <button type="submit" class="btn-buy">立即购买</button>
                </form>
              </c:when>
              <c:when test="${house.status == 1}">
                <!-- 已售出：添加disabled属性 -->
                <button class="btn-disabled" disabled>已售出</button>
              </c:when>
              <c:otherwise>
                <!-- 其他情况（如用户已购房）：添加disabled属性 -->
                <button class="btn-disabled" disabled>不可购买</button>
              </c:otherwise>
            </c:choose>
          </div>
        </div>
      </div>
    </c:forEach>
  </div>
</div>

<c:import url="footer.jsp" />
<script>
  function filterHouses() {
    try {
      // 获取筛选条件（允许为空，即“不限”）
      const priceRange = document.getElementById('priceRange').value;
      const areaRange = document.getElementById('areaRange').value;
      const location = document.getElementById('location').value;

      // 无需验证空值，允许“不限”
      // 直接构建表单提交
      const form = document.createElement('form');
      form.method = 'POST';
      form.action = 'HouseListServlet'; // 替换为实际处理筛选的Servlet路径

      // 添加所有筛选条件（包括空值，由后端判断“不限”）
      const createInput = (name, value) => {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = name;
        input.value = value;
        return input;
      };

      form.appendChild(createInput('priceRange', priceRange));
      form.appendChild(createInput('areaRange', areaRange));
      form.appendChild(createInput('location', location));

      document.body.appendChild(form);
      form.submit();
    } catch (error) {
      console.error('筛选出错:', error);
      alert('筛选失败，请重试');
    }
  }
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>